<template>
  <a-modal
    destroyOnClose
    title="链接选择器"
    :zIndex="zIndex"
    v-model="value"
    :width="860"
    okText="确认"
    cancelText="取消"
    @ok="onOk"
    @cancel="onCancel"
    :closable="false"
  >
    <div class="linkRow">
      <div class="linkLet scroll">
        <a-menu
          mode="inline"
          theme="light"
          @select="selectMenu"
          v-model="selectList"
          :default-open-keys="defaultOpenKeys"
          style="height: 100%"
        >
          <a-sub-menu v-for="(item, index) of LinkList" :key="index">
            <span slot="title"
              ><a-icon :type="item.icon" /><span>{{ item.name }}</span></span
            >
            <a-menu-item :key="`${index + '_' + i}`" v-for="(e, i) of item.child"> {{ e.name }}</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>

      <div class="linkRight">
        <template v-if="menuRightInfo">
          <template v-if="menuRightInfo.child">
            <div class="scroll">
              <div class="subnav" v-for="(item, index) of menuRightInfo.child" :key="index">
                <div class="subnavTit">{{ item.name }}</div>
                <div class="subnavItemList" v-if="item.list.length">
                  <div :class="['item', getLinkActive(e) ? 'active' : '']" v-for="e of item.list" @click="clickLink(e)">
                    {{ e.name }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="menuRightInfo.type === 'diy-page'">
            <pageDiy @handle="handle" :list="menuRightInfo.list"></pageDiy>
          </template>
          <!-- 商品分类 start! -->
          <template v-if="['goods-cat', 'goods-list'].includes(menuRightInfo.type)">
            <pageGoodsCat @handle="handle" :link="menuRightInfo.typeLink"></pageGoodsCat>
          </template>
          <!-- 商品分类 end! -->
          <!-- 商品积分商品 start -->
          <template v-if="['goods', 'goods-integral'].includes(menuRightInfo.type)">
            <pageGoods
              @handle="handle"
              :link="menuRightInfo.typeLink"
              :type="menuRightInfo.type"
              :params="{
                product_type: menuRightInfo.type === 'goods-integral' ? 4 : '',
              }"
            ></pageGoods>
          </template>
          <!-- 商品积分商品 end! -->
          <!-- 砍价、秒杀、拼团 start! -->
          <template
            v-if="['goods-seckill', 'goods-cut-price', 'goods-pt', 'goods-worker'].includes(menuRightInfo.type)"
          >
            <pageActivityGoods
              @handle="handle"
              :link="menuRightInfo.typeLink"
              :type="menuRightInfo.type"
            ></pageActivityGoods>
          </template>
          <!-- 砍价、秒杀、拼团 end! -->
          <!-- 专题 start! -->
          <template v-if="['special', 'article'].includes(menuRightInfo.type)">
            <pageSpecial @handle="handle" :link="menuRightInfo.typeLink"></pageSpecial>
          </template>
          <!-- 专题 end! -->
          <!-- 自定义链接 start! -->
          <template v-if="menuRightInfo.type === 'diy-link'">
            <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-form-model-item label="跳转路径" prop="name">
                <a-input v-model="form.name" />
              </a-form-model-item>
            </a-form-model>
          </template>
          <!-- 自定义链接 end! -->
          <!-- 店铺页面 start -->
          <template v-if="['change-store'].includes(menuRightInfo.type)">
            <pageStore @handle="handle" :link="menuRightInfo.typeLink" :type="menuRightInfo.type"></pageStore>
          </template>
          <!-- 店铺页面 end! -->
          <!-- 店铺分类页面 start -->
          <template v-if="['store-cat'].includes(menuRightInfo.type)">
            <pageStoreCat @handle="handle" :link="menuRightInfo.typeLink" :type="menuRightInfo.type"></pageStoreCat>
          </template>
          <!-- 店铺分类页面 end! -->
        </template>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { getUrlParam, getDiyURLText } from '@/utils/utils.js'
import { getLinkGroup, getLinkGroupShop } from '@/api/diy'
import searchGoods from '../searchGoods/index.vue'
import pageGoodsCat from './page-goods-cat.vue'
import pageGoods from './page-goods.vue'
import pageActivityGoods from './page-activity-goods.vue'
import pageSpecial from './page-special'
import pageDiy from './page-diy'
import pageStore from './page-store'
import pageStoreCat from './page-store-cat'

export default {
  name: 'SelectLink',
  components: {
    searchGoods,
    pageGoodsCat,
    pageSpecial,
    pageGoods,
    pageActivityGoods,
    pageDiy,
    pageStore,
    pageStoreCat,
  },

  computed: {
    getLinkActive() {
      return (e) => {
        if (!this.linkInfo.link) return false
        return this.linkInfo.link === getDiyURLText(e).link
      }
    },
  },
  data() {
    return {
      store_id: '',
      linkInfo: {},
      loading: true,
      catList: [],
      item: null,
      goodsPop: false,

      LinkList: [],

      menuRightInfo: null,

      selectList: ['0_0'],
      defaultOpenKeys: [0],

      form: {
        name: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入跳转路径',
            trigger: 'blur',
          },
        ],
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    }
  },
  props: {
    zIndex: {
      type: Number,
      default: 1000,
    },
    value: {
      type: Boolean,
      default: true,
    },
    type: {
      type: Number,
      default: 0,
    },
    parmas: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  created() {
    this.getList()
  },
  watch: {},
  methods: {
    async getList() {
      let { parmas } = this
      this.loading = true
      let res
      if (!this.type) {
        res = await getLinkGroup(parmas)
      } else {
        res = await getLinkGroupShop(parmas)
      }
      this.loading = false
      if (!res.code && res.data && res.data.list) {
        this.LinkList = res.data.list || []
      }

      this.$nextTick(() => {
        this.selectMenu({ key: '0_0' })
      })
    },

    // 获取切换数据
    selectMenu({ key }) {
      let { LinkList } = this,
        keys = key.split('_')

      this.menuRightInfo = LinkList[keys[0]].child[keys[1]]

      this.linkInfo = {}
      this.form.name = ''
    },

    // 选择普通链接
    clickLink(e) {
      this.linkInfo = getDiyURLText(e)
    },

    handle(type, item) {
      switch (type) {
        case 'link':
          this.linkInfo = item
          break
      }
    },

    onCancel() {
      this.$emit('input', false)
      this.$emit('cancel')
    },

    onOk() {
      let { linkInfo, menuRightInfo, form } = this,
        len = Object.keys(linkInfo).length

      if (menuRightInfo.type === 'diy-link') {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let info = {
              link: form.name,
              name: form.name,
              open_type: 'navigate',
              params: [],
            }
            this.$emit('input', false)
            this.$emit('onOk', info)
          } else {
            console.log('error submit!!')
            return false
          }
        })
        return
      }

      if (!linkInfo || !len) {
        return this.$message.error('请选择链接！')
      }
      this.$emit('input', false)
      this.$emit('onOk', linkInfo)
    },
  },
}
</script>
<style lang="scss" scoped>
.scroll {
  overflow-y: auto;
  height: 100%;

  &:after {
    content: '';
    position: absolute;
    left: 196px;
    width: 1px;
    top: 80px;
    bottom: 80px;
    background: #e8e8e8;
  }
}

.scroll::-webkit-scrollbar {
  width: 4px;
}
.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.scroll::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.linkRow {
  display: flex;
  margin: 0 -24px;
  height: 500px;
}

.linkLet {
  padding: 0 4px;
  width: 200px;
  height: 100%;
}

.linkRight {
  flex: 1;
  overflow: hidden;
  padding: 0 24px;
}

::v-deep {
  .ant-menu-inline .ant-menu-item:hover {
    background: #f0f0f0;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: #e6f4ff;
    color: #1890ff !important;
    margin-bottom: 4px;
    border-radius: 8px;
  }

  .ant-menu-inline .ant-menu-selected::after,
  .ant-menu-inline .ant-menu-item-selected::after {
    display: none;
  }

  .ant-menu-sub.ant-menu-inline > .ant-menu-item,
  .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 4px;
    border-radius: 8px;
  }

  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right: 0;
  }

  .ant-menu-sub.ant-menu-inline {
    background: #fafafa;
    padding-right: 4px;
  }
}

.subnavTit {
  padding-bottom: 20px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.subnavItemList {
  display: flex;
  flex-wrap: wrap;

  .item {
    margin: 0 8px 12px 0;
    padding: 6px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);

    &:hover {
      color: #1890ff;
      border-color: #1890ff;
      transition: 0.5s all;
    }

    &.active {
      background: #1890ff;
      color: #fff;
      border-color: #1890ff;
    }
  }
}
</style>
